/*
 * Copyright(C) 2019 FUYUN DATA SERVICES CO.,LTD. - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and confidential
 * 该源代码版权归属福韵数据服务有限公司所有
 * 未经授权，任何人不得复制、泄露、转载、使用，否则将视为侵权
 *
 */

import * as React from "react";
import { connect } from "react-redux";
import { Form, Button, InputNumber, Popconfirm, Select } from "antd";

import { FormComponentProps } from "antd/lib/form";
import { IRootState, Dispatch } from "src/store";

const mapStateToProps = ({ goods, searchLog, loading }: IRootState) => ({
  goods,
  searchLog,
  loading: loading.effects.goods.getProductList as any
});
const mapDispatchToProps = ({ goods, searchLog }: Dispatch) => ({
  getGoodsList: (payload: any) => goods.getGoodsList(payload),
  delPseudo: (payload: any) => searchLog.delPseudo(payload)
});

type connectedProps = ReturnType<typeof mapStateToProps> &
  ReturnType<typeof mapDispatchToProps>;


interface IState {
  edit: boolean;
  children: any;
  selectValue: string;
  selectName: string;
}

interface IProps extends connectedProps {
  edit: boolean;
}

class SecurityDel extends React.Component<IProps & FormComponentProps, IState> {
  public state = {
    edit: false,
    children: [],
    selectValue: '',
    selectName: ''
  };

  public componentDidMount = async () => {
    const { getGoodsList } = this.props;
    await getGoodsList({
      size: "1000",
      name: ""
    });
    const { goodsList } = this.props.goods;
    const cArray: any = [];
    goodsList.map(v => {
      cArray.push(<Select.Option key={v.name} value={v.productBatch}>{v.name}</Select.Option>);
    });
    this.setState({
      children: cArray
    });
  }

  public confirm = (e: any) => {
    const { delPseudo } = this.props;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.goodsName = this.state.selectName;
        console.log(values)
        delPseudo(values);
      }
    });
  };

  public handleChange = (value: any, option: any) => {
    this.setState({
      selectValue: value,
      selectName: option.props.children
    });
  };
  

  public render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div style={{ paddingTop: "20px" }}>
        <Form>
          <Form.Item
            label={"商品名称"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("goodsName", {
              initialValue: "",
              rules: [
                {
                  required: true,
                  message: "请选择商品名称"
                }
              ]
            })(
              <Select
                size="default"
                placeholder="请选择商品"
                style={{ width: "100%" }}
                onChange={this.handleChange}
              >
                {this.state.children}
              </Select>
            )}
          </Form.Item>

          <Form.Item
            label={"生产批次"}
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 8 }}
          >
            {getFieldDecorator("goodsBatch", {
              initialValue: this.state.selectValue,
              rules: [
                {
                  required: true,
                  message: "请输入生产批次"
                }
              ]
            })(
              <InputNumber
                style={{ width: "100%" }}
                placeholder="请输入批次号"
                min={0}
                disabled={true}
              />
            )}
          </Form.Item>

        </Form>

        <div style={{ textAlign: "center" }}>
          <Popconfirm
            title="确认要删除吗?"
            onConfirm={this.confirm}
            okText="确定"
            cancelText="取消"
          >
            <Button
              type="primary"
              style={{ marginRight: "20px", marginBottom: "20px" }}
            >
              删除
              </Button>
          </Popconfirm>
        </div>
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Form.create<IProps & FormComponentProps>({})(SecurityDel));

